<script lang="ts" setup>
import { Search } from '@element-plus/icons-vue'
import { PropType, computed, ref, watch } from 'vue'
import { Recordable } from '../types'
import { t } from '@/lang'
import FInput from '@/addon/htscrm/components/f-input'
import FInputRange from '@/addon/htscrm/components/f-input-range'

// defineOptions({ name: 'TableSearchForm' })
const prop = defineProps({
    formItems: {
        type: Array as PropType<any[]>,
        default: () => []
    },
    modelValue: {
        type: Object as PropType<Recordable>,
        default: () => ({})
    }
})

const emit = defineEmits(['update:modelValue', 'search', 'reset', 'change'])
const model = computed({
    get: () => prop.modelValue,
    set: (val) => emit('update:modelValue', val)
})
const defaultComponent = {
    clearable: true
}

const getComponentProps = computed(() => {
    return (item:any) => {
        const props = { ...defaultComponent, ...item.component.props }
        if (item.component.is === 'el-input') {
            props.prefixIcon = props.prefixIcon ?? Search
        }
        return props
    }
})

const children = ref<Recordable<any[]>>({})

watch(
    () => prop.formItems,
    (newValue) => {
        children.value = {}
        newValue.forEach(async (item) => {
            if (item.childrenComponent) {
                if (typeof item.childrenComponent.children === 'function') {
                    item.childrenComponent.children = await item.childrenComponent.children()
                } else {
                    children.value[item.attrs.prop] = item.childrenComponent.children
                }
            }
        })
    },
    { deep: true, immediate: true }
)

function handleSearch () {
    emit('search')
}
function handleReset () {
    emit('reset')
}
function handleChange (item: any) {
    if (item.component.is !== 'el-input') {
        // handleSearch()
    }
}

const isExpand = ref(false)
const showExpandBtn = computed(() => prop.formItems.length > 6)

const list = computed(() => {
    return prop.formItems.filter((item, index) => {
        if (isExpand.value) return true
        return index < 6
    })
})
function handleExpandToggle () {
    // TODO
    isExpand.value = !isExpand.value
}
</script>

<template>
  <el-form class="f-search" label-width="80px" :model="model" inline @submit.prevent>
    <el-row :gutter="10">
      <el-col v-for="(item, index) in list" :key="index" :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
        <el-form-item v-bind="item.attrs">
          <f-input-range
            v-if="item.component.is === 'f-input-range'"
            v-model="model[item.attrs.prop]"
            v-bind="getComponentProps(item)"
            @change="handleChange(item)"
          />
          <f-input
            v-if="item.component.is === 'f-input'"
            v-model="model[item.attrs.prop]"
            v-bind="getComponentProps(item)"
            @change="handleChange(item)"
          />
          <el-cascader
            v-if="item.component.is === 'el-cascader'"
            v-model="model[item.attrs.prop]"
            v-bind="getComponentProps(item)"
            @change="handleChange(item)"
          />
          <component
            v-else
            :is="item.component.is"
            v-model="model[item.attrs.prop]"
            v-bind="getComponentProps(item)"
            @key.enter="handleChange(item)"
          >
            <template v-if="item.childrenComponent">
              <component
                v-for="(child, childIndex) in children[item.attrs.prop]"
                :is="item.childrenComponent.is"
                :key="childIndex"
                v-bind="child"
              />
            </template>
          </component>
        </el-form-item>
      </el-col>
      <el-col v-if="formItems.length<3" :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
        <el-form-item>
          <el-button @click="handleReset()">{{t('reset')}}</el-button>
          <el-button type="primary" @click="handleSearch()">{{ t('search') }}</el-button>
        </el-form-item>
      </el-col>
      <el-col v-if="formItems.length==3" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <div class="text-right mb-[10px]">
          <el-button @click="handleReset()">{{t('reset')}}</el-button>
          <el-button type="primary" @click="handleSearch()">{{ t('search') }}</el-button>
        </div>
      </el-col>
      <el-col v-if="formItems.length>3" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <div class="flex justify-end pb-[10px]">
          <el-button v-if="showExpandBtn" @click="handleExpandToggle()" text>
            <span v-if="!isExpand" class="flex items-center">展开<el-icon class="ml-[5px]"><ArrowDownBold /></el-icon></span>
            <span v-if="isExpand" class="flex items-center">收起<el-icon class="ml-[5px]"><ArrowUpBold /></el-icon></span>
          </el-button>
          <el-button @click="handleReset()">{{t('reset')}}</el-button>
          <el-button type="primary" @click="handleSearch()">{{ t('search') }}</el-button>
        </div>
      </el-col>
    </el-row>
  </el-form>
</template>

<style lang="scss">
.f-search {
  margin-bottom: 15px;
  padding: 10px 15px 0;
  background-color: var(--el-bg-color);

  .el-form-item {
    margin-bottom: 10px;
    width: 100%;
  }

  .el-input,
  .el-select,
  .el-date-editor {
    width: 100%;

  }

  .el-date-editor--datetimerange {
    width: 100%;
  }

  .el-form--inline .el-form-item {
    margin-right: 15px;
  }

  :deep(.el-select .el-input__inner ){
    padding: 0 20px !important;
  }
}
</style>
